<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    
    <h:head>
        <title>Tạo mới menu</title>
        <style type="text/css">
                .ui-widget {
                    font-family: Tahoma;
                    font-size: 11px;
                }
        </style>
    </h:head>  
    <h:body>
        <h:outputStylesheet library="css" name="component.css"/>
        <f:metadata>
            <f:event type="preRenderView" listener="#{menuBean.preRenderNewView()}" />
        </f:metadata>
        <h:form id="mainForm">
            <p:outputPanel>
                <p:messages id="msgs"/>
                <p:toolbar style="margin-bottom: 10px; margin-top: 10px;">
                    <p:toolbarGroup align="left">  
                        <p:commandButton value="Lưu" actionListener="#{menuBean.saveAction()}" update=":mainForm"/>
                        <p:commandButton type="reset" value="Nhập lại"/>
                    </p:toolbarGroup>
                </p:toolbar>
                
                <h:panelGrid styleClass="panelGrid" columnClasses="ui-state-default labelCol, ui-widget-content" 
                             columns="2" cellpadding="5" width="100%">
                    <h:outputLabel for="name" style="display: inline; float: right; padding-right: 5px;" value="Tên *" />  
                    <p:inputText value="#{menuBean.menu.name}" id="name" required="true" label="Tên" maxlength="50"
                                 requiredMessage="Yêu cầu nhập tên menu"/>
                    
                    <h:outputLabel style="display: inline; float: right; padding-right: 5px;" value="Mã *" />  
                    <p:selectOneMenu value="#{menuBean.menu.code}" effect="fade">  
                        <f:selectItems value="#{menuBean.menuCodes}" var="menu" itemLabel="#{menu}" itemValue="#{menu}"/>  
                    </p:selectOneMenu>
                    
                    <h:outputLabel style="display: inline; float: right; padding-right: 5px;" value="Menu cha" />  
                    <p:selectOneMenu value="#{menuBean.menu.parent}" effect="fade" converter="menuConverter">
                        <f:selectItem itemLabel="" itemValue=""/>
                        <f:selectItems value="#{menuBean.menuList}" var="parent" itemLabel="#{parent.name}" itemValue="#{parent}"/>  
                    </p:selectOneMenu>
                    
                    <h:outputLabel for="url" style="display: inline; float: right; padding-right: 5px;" value="URL *" />  
                    <p:inputText value="#{menuBean.menu.url }" id="url" required="true" label="URL" maxlength="50"
                                 requiredMessage="Yêu cầu nhập URL"/>
                    
                    <h:outputLabel for="description" style="display: inline; float: right; padding-right: 5px;" value="Mô tả" />
                    <h:panelGroup>
                        <p:inputTextarea id="description" counter="counter" counterTemplate="Còn lại {0} ký tự." maxlength="200" 
                                         value="#{menuBean.menu.description}"/>
                        <h:outputText id="counter" />
                    </h:panelGroup>
                </h:panelGrid>
            </p:outputPanel>
        </h:form>  
    </h:body>  
</html>
